import React from 'react';
import {
  HashRouter as Router,
  NavLink,
  Switch,
  useLocation
} from "react-router-dom";
// renderRoutes读取路由配置转化为Route标签
import { renderRoutes } from 'react-router-config';
import routes from '@/router';
import CustomIcon from '@/components/CustomIcon';

import s from './style.less';

const Content = () => {
  return (
    // <Router>
      <div className={s.indexContainer}>
        <div className={s.nav}>
          <ul className={s.list}>
            <li>
              <NavLink activeClassName="router-link-active" to="/">
                <CustomIcon className={s.customIcon} type="icon-faxian" />
                <span>发现音乐</span>
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="router-link-active" to="/ranking">
                <CustomIcon className={s.customIcon} type="icon-yinyue" />
                <span>最新音乐</span>
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="router-link-active" to="/playlists">
                <CustomIcon className={s.customIcon} type="icon-songlist" />
                <span>推荐歌单</span>
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="router-link-active" to="/mvs">
              <CustomIcon className={s.customIcon} type="icon-MV" />
                <span>发现MV</span>
              </NavLink>
            </li>
          </ul>
        </div>
        <div className={s.main}>
          <Switch>
            {renderRoutes(routes)}
          </Switch>
        </div>
      </div>
    // </Router>
  )
}

export default Content;